<!--  -->
<template>
  <div>
    <EditPageTitle :titleLabel="view_title_label" />
    <div class="editContentPage">
      <div class="inputLine">
        <label>{{ eventName.label }}</label>
        <input type="text" v-model="eventName.inputVal" />
      </div>
      <div class="inputLine">
        <label>{{ eventTime.label }}</label>
        <input type="text" v-model="eventTime.inputVal" />
      </div>

      <div class="editorLine">
        <label for="">{{ eventDetail.label }}</label>
        <wEditor
          class="editorBox"
          @change="valChange"
          :value="eventDetail.inputVal"
        ></wEditor>
      </div>

      <div class="inputLine">
        <label>上传视频</label>
        <div class="albumvideo">
          <div class="pic_img">
            <el-upload
              v-loading="loading"
              element-loading-text="上传中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)"
              class="avatar-uploader"
              action=""
              :on-change="handleFileChange"
              v-bind:on-progress="uploadVideoProcess"
              v-bind:on-success="handleVideoSuccess"
              v-bind:before-upload="beforeUploadVideo"
              v-bind:show-file-list="false"
              :http-request="httpRequest"
            >
              <!-- <video
              v-if="videoForm.showVideoPath != '' && !videoFlag"
              v-bind:src="videoForm.showVideoPath"
              class="avatar video-avatar"
              controls="controls"
            >
              您的浏览器不支持视频播放
            </video> -->
              <i class="el-icon-plus avatar-uploader-icon myIcon"></i>
              <!-- <el-progress
              v-if="videoFlag == true"
              type="circle"
              v-bind:percentage="videoUploadPercent"
              style="margin-top: 7px"
            ></el-progress> -->
            </el-upload>
          </div>
          <p class="Upload_pictures">
            <span></span>
            <span>最多可以上传1个视频，建议大小50M，仅支持mp4</span>
          </p>
        </div>
      </div>
    </div>
    <EditButton @saveDraft="saveDraft" @saveUp="saveAndUp"></EditButton>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 当前所处背景
      env: "",
      // 视频上传状态loading
      loading: false,
      uploadData: {},
      view_title_label: "生物恐怖事件",
      eventName: {
        label: "事件名称",
        inputVal: "",
      },
      eventTime: {
        label: "时间",
        inputVal: "",
      },
      eventDetail: {
        label: "事件详情",
        inputVal: "",
      },
      videoPath: "",
      videoFlag: false,
      //是否显示进度条
      videoUploadPercent: "",
      //进度条的进度，
      isShowUploadVideo: false,
      //显示上传按钮
      videoForm: {
        showVideoPath: "",
      },
    };
  },
  components: {},
  computed: {},
  mounted() {
    // 路由传递的类型参数  新增：add  编辑：edit 草稿箱编辑：draftEdit
    const type = this.$route.params.type;
    switch (type) {
      case "add":
        this.view_title_label = this.view_title_label + "新增";
        this.env = "add";
        break;
      case "edit":
        this.view_title_label = this.view_title_label + "编辑";
        this.env = "edit";
        this.getData();
        break;
      case "draftEdit":
        this.view_title_label = this.view_title_label + "草稿编辑";
        this.env = "draft";
        this.getData();
        break;
      default:
        break;
    }
    // 路由传递的参数id
    const id = this.$route.params.id;
  },
  methods: {
    handleFileChange(file) {
      // console.log(file);
    },
    httpRequest(content) {
      // console.log(content);
      const formData = new FormData();
      formData.append("file[]", content.file);

      var config = {
        onUploadProgress: function (progressEvent) {
          let num = ((progressEvent.loaded / progressEvent.total) * 100) | 0; //百分比
          // console.log(num);
        },
      };
      this.$axios
        .post(
          "http://192.168.100.246:9999/index.php/admin/upload/equip_upload",
          formData
        )
        .then(function (res) {
          // console.log(res);
          // for (let index = 0; index < res.data.data.length; index++) {
          //   // insert("http://192.168.100.246:9999" + res.data.data[index]);
          // }
          if (res.status === 200) {
            this.videoPath = res.data.data[0];
          } else {
          }
        });
    },
    //上传前回调
    beforeUploadVideo(file) {
      // console.log("file    "+11111111);
      var fileSize = file.size / 1024 / 1024 < 50;
      if (
        [
          "video/mp4",
          // "video/ogg",
          // "video/flv",
          // "video/avi",
          // "video/wmv",
          // "video/rmvb",
          // "video/mov",
        ].indexOf(file.type) == -1
      ) {
        this.$message.error("请上传正确的视频格式");
        // this.$message({
        //   message: "请上传正确的视频格式",
        //   center: true,
        //   duration: 1000,
        // });

        return false;
      }
      if (!fileSize) {
        this.$message.error("视频大小不能超过50MB");
        return false;
      }
      this.isShowUploadVideo = false;
    },
    //进度条
    uploadVideoProcess(event, file, fileList) {
      // console.log(file);
      this.videoFlag = true;
      this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },
    //上传成功回调
    handleVideoSuccess(res, file) {
      // console.log(res);
    },
    valChange(val) {
      this.eventDetail.inputVal = val;
    },
    getData() {
      this.$api.data
        .eventsListItem({
          params: {
            id: this.$route.params.id,
          },
        })
        .then((res) => {
          this.eventName.inputVal = res.data.data.title;
          this.eventTime.inputVal = res.data.data.title;
          this.eventDetail.inputVal = res.data.data.content;
        });
    },
    /**
     * @description 保存并上架 根据env参数的不同判断当前处于什么环境
     * add  新增，参数不需要带id
     * draft
     */
    saveAndUp() {
      if (this.env == "edit") {
        //编辑后保存并上架
        this.$api.data
          .eventsSave({
            id: this.$route.params.id,
            title: this.eventName.inputVal,
            content: this.eventDetail.inputVal,
            eventTime: this.eventTime.inputVal,
            video_list_str: this.videoPath,
            statu: "Y",
            draft: "N",
            c_type: "重大新发突发传",
          })
          .then((res) => {
            if (res.data.statu == 0) this.succeedBack();
          });
      } else if (this.env == "add") {
        //新增
        this.$api.data
          .eventsSave({
            title: this.eventName.inputVal,
            content: this.eventDetail.inputVal,
            eventTime: this.eventTime.inputVal,
            video_list_str: this.videoPath,
            statu: "Y",
            draft: "N",
            c_type: "重大新发突发传",
          })
          .then((res) => {
            if (res.data.statu == 0) this.succeedBack();
          });
      } else if (this.env == "draft") {
        //草稿编辑
        this.$api.data
          .eventsSave({
            id: this.$route.params.id,
            title: this.eventName.inputVal,
            content: this.eventDetail.inputVal,
            eventTime: this.eventTime.inputVal,
            video_list_str: this.videoPath,
            statu: "Y",
            draft: "N",
            c_type: "重大新发突发传",
          })
          .then((res) => {
            if (res.data.statu == 0) this.succeedBack();
          });
      }
    },
    saveDraft() {
      if (this.env == "edit") {
        //编辑后保存为草稿
        this.$api.data
          .eventsSave({
            id: this.$route.params.id,
            title: this.eventName.inputVal,
            content: this.eventDetail.inputVal,
            eventTime: this.eventTime.inputVal,
            video_list_str: this.videoPath,
            draft: "Y",
            c_type: "重大新发突发传",
          })
          .then((res) => {
            // console.log(res);
            if (res.data.statu == 0) this.succeedBack();
          });
      } else if (this.env == "add") {
        //后保存为草稿
        this.$api.data
          .eventsSave({
            title: this.eventName.inputVal,
            content: this.eventDetail.inputVal,
            eventTime: this.eventTime.inputVal,
            video_list_str: this.videoPath,
            draft: "Y",
            c_type: "重大新发突发传",
          })
          .then((res) => {
            if (res.data.statu == 0) this.succeedBack();
          });
      } else if (this.env == "draft") {
        //草稿编辑后保存为草稿
        this.$api.data
          .eventsSave({
            id: this.$route.params.id,
            title: this.eventName.inputVal,
            content: this.eventDetail.inputVal,
            eventTime: this.eventTime.inputVal,
            video_list_str: this.videoPath,
            draft: "Y",
            c_type: "重大新发突发传",
          })
          .then((res) => {
            if (res.data.statu == 0) this.succeedBack();
          });
      }
    },
    succeedBack() {
      this.$router.go(-1);
    },
  },
};
</script>
<style  scoped>
</style>